<template>
	<view>
		
		<view class="padding flex align-center justify-between" @click="handleGoAddress" v-if='!orderAddress' style="padding-top:  var(--status-bar-height);" >
			<view class="">
				暂无地址，点击添加地址
			</view>
			<text class="cuIcon-right"></text>
		</view>


		<view class="padding flex align-center justify-between  u-border-bottom" @click="handleGoAddress" v-else>
			<view class="">
				{{orderAddress.username}} {{orderAddress.phone}}
				<view class="">
					{{orderAddress.city}}
					{{orderAddress.region}}
					{{orderAddress.detail}}
				</view>
			</view>
			<text class="cuIcon-right"></text>
		</view>
		<view class="padding-xs">
			配送时间

		</view>
		<view class="flex justify-around">
			<view class="">
				请选择配送日期
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="">
				请选择配送时间
				<view class="uni-list-cell-db">
					<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="flex padding" v-for="(item,index) in cartList" :key="item.id+item.idx">
			<view class="flex align-center">
				<!-- <text 
					class="iconfont icon-gouxuan margin-right"
					
					@click="handleCheck(index)"
				></text> -->
				<image class="poster margin-right" :src="item.img" mode=""></image>
			</view>
			<view class="flex justify-between info">
				<view class="">
					{{item.name}}
					<view class="margin-tb-xs">{{item.french}}</view>
					￥{{item.list[item.idx].price}}
				</view>
				<view class="flex flex-direction align-end">
					<view @click="handleEdit(index)" class="edit margin-bottom-xs">
						<text class="iconfont icon-bianji"></text>
					</view>
					{{item.list[item.idx].spec}}
					X
					{{item.num}}
				</view>
			</view>
		</view>
		<view class="fixed bg-white flex">
			<view class="flex flex-sub padding align-center">

				<view class="margin-left">
					共计:{{allInfo.allPrice}}
				</view>
			</view>
			<view @click="handleOrder" class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '00:00'
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			...mapState({
				cartList: state => state.cart.cartList,
				userInfo: state => state.user.userinfo
			}),
			...mapGetters({
				orderAddress: 'address/orderAddress',
				allInfo: 'cart/allInfo'
			})
		},
		methods: {
			handleOrder(){
				uni.showToast({
					title:'所以支付要咋做呢?',
					icon:'none' 
				})
			},
			handleGoAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			  bindTimeChange: function(e) {
			            this.time = e.detail.value
			        },
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	.poster {
		width: 180upx;
		height: 180upx;
		background-color: #d8d8d8;
	}

	.info {
		width: 60%;

		.edit {
			width: 80upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: #e6e6e6;
			border-radius: 50%;

		}
	}

	.gouxuan {
		color: #ff0004 !important;
		// background-color:  #000000;
	}

	.flex.align-end {
		min-width: 210upx;
	}

	.icon-gouxuan {
		color: #000000;
	}

	.cu-btn.lg {
		width: 50%;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
